<template>
  <p class="filters">
    <!-- <span
      @click="visibility = 'all'"
      :class="{ selected: visibility === 'all' }"
      >All</span
    >
    <span
      @click="visibility = 'active'"
      :class="{ selected: visibility === 'active' }"
      >Active</span
    >
    <span
      @click="visibility = 'completed'"
      :class="{ selected: visibility === 'completed' }"
      >Completed</span
    > -->
    <span
      v-for="item in items"
      :key="item.value"
      @click="$emit('update:modelValue', item.value)"
      :class="{ selected: modelValue === item.value }"
      >{{ item.label }}</span
    >
  </p>
</template>

<script>
export default {
  props: ["items", "modelValue"],
  emits: ["update:modelValue"],
};
</script>

<style scoped>
.filters > span {
  padding: 2px 4px;
  margin-right: 4px;
  border: 1px solid transparent;
}

.filters > span.selected {
  border-color: rgba(173, 47, 471, 0.2);
}
</style>
